function initPage(listId,detailId,editUrl,delUrl,fieldArray,editArray,afterLoadFn){
	var listPanel,detailPanel,table,checkbox;
	listPanel= $('#'+listId);
	detailPanel=$('#'+detailId);
	table = listPanel.children('table');
	table.find('tr').each(function(i){
		$(this).bind('click',function(){
			checkbox = $(this).find('input[type="checkbox"]');
			if(checkbox.attr('checked')){
				checkbox.removeAttr('checked');
			}else{
				checkbox.attr('checked',true);
			}
		});
		
		$(this).bind('dblclick',function(){
			checkbox = $(this).find('input[type="checkbox"]');
			var entityId = checkbox.val();
			if(entityId){
				showDetailPanel(listPanel,detailPanel,editArray);
				showOrHideEditButton('edit');
				loadDetail(entityId,detailPanel,editUrl,fieldArray,afterLoadFn);
			}
		});
	});
	
	$('#editButton').bind('click',function(){buttonToggle(detailPanel,editArray);});
	$('#saveButton').bind('click',function(){
		if(!$(this).hasClass('disabled')){
			var form = detailPanel.children('form');
			form.submit();
		}
	});
	$('#closeButton').bind('click',function(){closeEdit(listPanel,detailPanel);});
	$('#addButton').bind('click',function(){addEntity(listPanel,detailPanel,fieldArray,editArray);});
	$('#delButton').bind('click',function(){delEntity(delUrl,listPanel);});
	
}

function showDetailPanel(listPanel,detailPanel,editArray){
	var editButton = $('#editButton');
	editButton.addClass('active');
	buttonToggle(detailPanel,editArray);
	if(!detailPanel.hasClass('detail-top')){
		listPanel.addClass('span9');
		detailPanel.addClass('span3');
	}
	detailPanel.show();
}

function showOrHideEditButton(_flag){
	if(_flag=='edit'){
		$('#editButton').show();
	}else{
		$('#editButton').hide();
	}
}

function loadDetail(entityId,detailPanel,editUrl,fieldArray,afterLoadFn){
	$.ajax({
		url: editUrl,
		type : 'POST',
		data : {editId:entityId},
		success: function(data) {
			var _data = eval('('+data+')'),form,fieldName;
			if(_data){
				form = detailPanel.children('form');
				for(var i=0;i<fieldArray.length;i++){
					fieldName = fieldArray[i];
					form.find('*[name="'+fieldName+'"]').val(_data[fieldName]);
				}
				if(afterLoadFn &&  typeof(afterLoadFn)=='function')
					afterLoadFn(_data);
			}
		},
		error: function () {
			alert('error when edit.');
		}
	});
}

function buttonToggle(detailPanel,editArray){
	var editButton = $('#editButton'),fieldName;
	editButton.button('toggle');
	form = detailPanel.children('form');
	if(editButton.hasClass('active')){
		for(var i=0;i<editArray.length;i++){
			fieldName = editArray[i];
			if(fieldName=='.chzn-select'){
				$('.chzn-select').attr('disabled', false).trigger("liszt:updated");
				continue;
			}
			form.find('*[name="'+fieldName+'"]').removeAttr('disabled');
		}
		$('#saveButton').removeClass('disabled');
	}else{
		for(var i=0;i<editArray.length;i++){
			fieldName = editArray[i];
			if(fieldName=='.chzn-select'){
				$('.chzn-select').attr('disabled', true).trigger("liszt:updated");
				continue;
			}
			form.find('*[name="'+fieldName+'"]').attr('disabled','disabled');
		}
		$('#saveButton').addClass('disabled','disabled');
	}
}

function addEntity(listPanel,detailPanel,fieldArray,editArray){
	var form = detailPanel.children('form'),fieldName;
	for(var i=0;i<fieldArray.length;i++){
		fieldName = fieldArray[i];
		if(fieldName=='.chzn-select'){
			$('.chzn-select').children("option:selected").attr("selected",false).trigger("liszt:updated");
			continue;
		}
		form.find('*[name="'+fieldName+'"]').val('');
	}
	var editButton = $('#editButton');
	editButton.removeClass('active');
	showOrHideEditButton('add');
	showDetailPanel(listPanel,detailPanel,editArray);
	
	buttonToggle(detailPanel,editArray);
}
function closeEdit(listPanel,detailPanel){
	listPanel.removeClass('span9');
	detailPanel.removeClass('span3');
	detailPanel.hide();
}

/**
 * delete entity
 */
function delEntity(delUrl,listPanel){
	var ids = getCheckedRow(listPanel);
	if(ids){
		$.ajax({
			url: delUrl,
			type : 'POST',
			data : {ids:ids},
			success: function (data) {
				removeFormTable(listPanel);
				var msg = eval('('+data+')').msg;
				if(msg){
					showSuccessMsg('#showMessage',msg);
				}
			},
			error: function () {
				alert('error when delete.');
			}
		});
	}
}


 
function getCheckedRow(listPanel){
	var ids = '';
	listPanel.find("input:checked").each(function(){
		ids += $(this).attr("value")+','; 
    });
	return ids;
}

function removeFormTable(listPanel){
	listPanel.find("input:checked").each(function(){
		$(this).closest('tr').remove();
	});
}

function showSuccessMsg(id,msg){
	var showMessage = $(id);
	var msgDiv = $('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button>'+msg+'</div>');
	msgDiv.appendTo(showMessage);
	setTimeout(function(){
		showMessage.html('');
	},5000);
}
